<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="600px">
    <el-form ref="form" label-width="150px">
      <el-form-item label="支付金额" align="left">
        <span class="price-font" v-text="'￥'+ToMoney(orderDetail.price)"></span>
      </el-form-item>
      <el-form-item label="支付方式" align="left">
        <el-select v-model="payType" @change="changePayType" placeholder="状态">
          <el-option
            v-for="(item,index) in payTypeArr"
            :key="index"
            :label="item"
            :value="index">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付二维码" align="left" v-if="payType===1 || payType===2">
        <div class="qr-box">
          <canvas ref="canvasId" id="canvasId" :style="qrCodeStyle"></canvas>
          <div class="fade" v-if="qrSeconds===0">
            <span>二维码已失效,点击刷新</span>
          </div>
          <div style="line-height: 50px; height: 50px;" v-if="qrSeconds>0">
            有效时间:<cutdown-box ref="cutdown-box" :curr-seconds-params="qrSeconds"/>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="账户余额" align="left" v-if="payType===0">
        <span class="price-font" v-text="'￥'+ToMoney(money)"></span>
      </el-form-item>
      <el-form-item label="系统对公收款信息" align="left" v-if="payType===3">
        <div>收款公司名称: <span class="price-font" v-text="systemBank.companyName"></span></div>
        <div>收款银行: <span class="price-font" v-text="systemBank.bank"></span></div>
        <div>收款银行卡号: <span class="price-font" v-text="systemBank.bankCard"></span></div>
        <div>打款备注: <span class="price-font" v-text="getOrderTip()"></span></div>
      </el-form-item>
      <el-form-item align="left">
        <el-button type="primary" v-if="payType===0" @click="submit">确认支付</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcode'
import CutdownBox from '../Common/CutdownBox'
export default {
  name: 'SupplierOrderPayDialog',
  components: {CutdownBox},
  props:{
    successFunction:Function
  },
  data: function () {
    return {
      qrCodeStyle:{
        width:180,
        height:180,
      },
      orderDetail:{"companyName":"成都可可网络科技有限公司","bank":"中国工商银行股份有限公司成都市支行","bankCard":"3711123209200299105"},
      info:'供货单-支付',
      dialogVisible: false,
      payUrl:'',
      payTypeArr:dict.OrderPayArr,
      payType:0,
      qrSeconds:0,
      money:0,
      systemBank:{}
    }
  },
  mounted () {
    // this.setQr('9ybfgk3OcJ6188mX6emBBbL13AwfGXUHRjISyPAgHJiKVJTNqZ9ybfgk3OcJ6188mX6emBBbL13AwfGXUHRjISyPAgHJiKVJTNqZ')
  },
  methods: {
    getOrderTip:function () {
      var index=this.orderDetail.orderNo.length-5
      return 'S'+this.orderDetail.orderNo.substring(index,index+5)
    },
    changePayType:function () {
      if (this.payType===1 || this.payType===2 || this.payType===3){
        let $this=this
        $this.MyRequest(this.ApiDoNameSupplier+"SupplierOrder/pay",{
          id:this.orderDetail.id,
          payType:this.payType
        },function (data) {
          if ($this.payType!==3){
            $this.setQr(data)
            $this.qrSeconds=60
            $this.$refs['cutdown-box'].setCurrSeconds($this.qrSeconds)
          }else{
            $this.systemBank=data
            console.log('$this.systemBank',$this.systemBank)
          }
          $this.$forceUpdate()
        })
      }
    },
    getMoney:function () {
      let $this=this
      $this.MyRequest(this.ApiDoNameSupplier+"Shop/money",{},function (money) {
        $this.money=money
        $this.$forceUpdate()
      })
    },
    setQr:function (str) {
      let $this=this
      setTimeout(function () {
        QRCode.toCanvas(
          $this.$refs.canvasId,
          str,
          { width:$this.qrCodeStyle.width, height:$this.qrCodeStyle.height, toSJISFunc: QRCode.toSJIS },
          error => {}
        );
      },500)
    },
    open: function (orderDetail) {
      this.orderDetail = orderDetail
      this.dialogVisible = true
      this.getMoney()
      this.$forceUpdate()
    },
    submit: function () {
      if (this.money<this.orderDetail.price){
        return this.$message.error("当前账户余额不足")
      }
      let $this=this
      $this.MyRequest(this.ApiDoNameSupplier+"SupplierOrder/pay",{
        id:this.orderDetail.id,
        payType:this.payType
      },function (data) {
        $this.$message.success("支付成功")
        $this.dialogVisible=false
        $this.$forceUpdate()
      })

    }
  }
}
</script>

<style scoped>
  .qr-box{ padding: 5px; border: 1px solid #EEEEEE; width: 185px; height: 235px; border-radius: 4px; position: relative; text-align: center}
  .qr-box>.fade{ width: 170px; height: 110px; position: absolute; left: 2px; top: 2px; background: rgba(0,0,0,.5); z-index: 9999; padding-top: 80px; padding-left: 10px; padding-right: 10px; text-align: center}
  .qr-box>.fade>span{ color: #FFFFFF;}
</style>
